<template>
  <div class="chino-dynamic-wrap">
    <div class="chino-filter-wrap">
      <el-popover
        placement="bottom"
        trigger="click">
        <div class="filter-container">
          <el-col :span="24" style="margin-bottom: 10px">
            <el-checkbox
              :indeterminate="isIndeterminate"
              @change="handleCheckAllColumnChange"
              v-model="checkAll"
            >
              全选
            </el-checkbox>
          </el-col>
          <el-checkbox-group @change="handleCheckedChange" style="width: 100px" v-model="_formThead">
            <el-col :key="item" :span="24" style="margin-bottom: 5px" v-for="item in filterOption">
              <el-checkbox :label="item">
                {{item}}
              </el-checkbox>
            </el-col>
          </el-checkbox-group>
        </div>
        <el-button plain slot="reference">
          筛选列<i class="el-icon-edit el-icon--right"></i>
        </el-button>
      </el-popover>
    </div>
    <div class="table-wrap">
      <el-table
        :fit="true"
        :key="key"
        border="border"
        class="chino-dynamic-table"
        highlight-current-row
        ref="singleTable"
        style="width: 100%"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <template v-if="isShowSelector">
          <el-table-column
            align="center"
            fixed="left"
            type="selection"
            width="55">
          </el-table-column>
        </template>
        <slot name="tableFirstFix"></slot>
        <el-table-column
          :key="colName"
          :label="getChColNameByEngName(colName)"
          :width="getColWidthByDir(colName)"
          align="center"
          show-overflow-tooltip
          v-for="colName in constFormTheadOptions">
          <template slot-scope="{row,$index}">
            {{getColFilterByDir(colName)(row[colName],$index,colName,row)}}
          </template>
        </el-table-column>
        <el-table-column
          :key="colName"
          :label="getChColNameByEngName(colName)"
          :width="getColWidthByDir(colName)"
          align="center"
          show-overflow-tooltip
          v-for="colName in dynamicCol">
          <template slot-scope="{row,$index}">
            {{getColFilterByDir(colName)(row[colName],$index,colName,row)}}
          </template>
        </el-table-column>
        <el-table-column
          :width="operatorColWidth"
          align="center"
          fixed="right"
          label="操作"
          v-if="operatorObj.length">
          <div slot-scope="{$index,row}" style="display: flex;justify-content: center;align-items: center">
            <el-button
              :key="idx"
              :size="e.size"
              :type="e.type"
              @click="() => e.handleOperator($index,row)"
              v-for="(e,idx) in operatorObj"
            > {{e.text}}
            </el-button>
          </div>
        </el-table-column>
        <slot name="tableLastFix"></slot>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { getChNameByEngName } from './utils'

  export default {
    name: 'chinoDynamicTable',
    props: {
      isAutoStretch: {
        type: Boolean,
        default: true   //  是否自动撑开
      },
      operatorColWidth: {
        type: Number,
        default: 200
      },
      border: {
        type: Boolean,
        default: true
      },
      colWidth: {
        type: Number,
        default: 150
      },
      isShowSelector: {
        type: Boolean,
        default: true
      },
      formThead: {
        type: Array,  //  当前选中的
        required: true
      },
      formTheadOptions: {
        type: Array, //  全部需要动态显示的
        required: true
      },
      constFormTheadOptions: {
        type: Array //  一直要显示的
      },
      colDescObject: {
        type: Array //  列描述对象
      },
      operatorObj: {
        type: Array, //  操作的btn对象
        default: () => []
      }
    },

    computed: {
      _formThead: {
        get(component) {
          return this.formThead.filter(e => !this.constFormTheadOptions.includes(e))
        },
        set(newValue) {
          this.$emit('update:formThead', newValue)
        }
      },
      //  en2ch language
      getChColNameByEngName() {
        return getChNameByEngName({ colDir: this.colDescObject, isShowWarn: false })
      },
      filterOption() {
        //  eject always show's col
        return [...new Set(this.formTheadOptions.filter(e => !this.constFormTheadOptions.includes(e)))]
      }
    },
    data() {
      return {
        checkAll: false,
        isIndeterminate: false,
        key: 3,
        dynamicCol: this._formThead  //  col 使用
      }
    },
    methods: {
      getColFilterByDir(colEngName) {
        // return getChNameByEngNameChino
        // ({ isShowWarn: false, isRetOriginParamName: false, retDefault: (v) => v })
        // ({ colDir: this.colDescObject, needName: 'filter' })
        const result = this.colDescObject.find(e => e.engName === colEngName)
        if (result && result.filter) {
          return result.filter
        }
        return (v) => v
      },
      getColWidthByDir(colEngName) {
        const result = this.colDescObject.find(e => e.engName === colEngName)
        if (result && result.width) {
          return result.width
        }
        // return
        return this.isAutoStretch ? '' : this.colWidth
      },
      //   user 筛选列 单个点击改变时触发
      handleCheckedChange(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.formTheadOptions.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.formTheadOptions.length
      },
      //  user 筛选列  全选触发
      handleCheckAllColumnChange(val) {
        this._formThead = val ? this.formTheadOptions : []
        this.isIndeterminate = false
      },
      checkBoxCloseSelected() {
        this.$nextTick(() => {
          const _st = this.$refs.singleTable
          console.warn(` table 不能关闭multi选择 未获取到refs => singleTable`)
          _st && _st.clearSelection()
        })
      },
      handleCheckAllChange(isCheckAll) {
        this._formThead = isCheckAll ? this.filterOption : []
      }

    },
    watch: {
      _formThead: {
        immediate: true,
        deep: true,
        handler(valArr) {
          console.info(valArr)
          this.dynamicCol = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
          ++this.key
        }
      }

    }

  }
</script>

<style lang="scss" scoped>
  .chino-dynamic-wrap {

    .chino-filter-wrap {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }

    .chino-dynamic-table {

    }

  }
</style>
